<template>
    <view>
        <!-- 模块9  弹窗 -->
        <cf-module-popup v-if="contentType === 'pop'"></cf-module-popup>
        <!-- 模块8  标题-->
        <cf-module-title v-if="contentType === 'title'"></cf-module-title>
        <!-- 模块2 轮播图 -->
        <cf-module-banner v-if="contentType === 'slide'"></cf-module-banner>
        <!-- 模块6  魔方-->
        <cf-module-cube v-if="contentType === 'imageRubik'"></cf-module-cube>
        <!-- 模块7  公告-->
        <cf-module-notice v-if="contentType === 'notice'"></cf-module-notice>
        <!-- 模块1 搜索框 -->
        <cf-module-search v-if="contentType === 'search'"></cf-module-search>
        <!-- 发现页 新样式的 商品列表 -->
        <cf-module-list-new v-if="contentType === 'goodsNew'"></cf-module-list-new>
        <!-- 仿优衣库 轮播组件 -->
        <cf-modele-uniqlo v-if="contentType === 'uniqloBanner'"></cf-modele-uniqlo>
        <!-- 发现页  新样式的banner -->
        <cf-module-banner-new v-if="contentType === 'bannerNew'"></cf-module-banner-new>
        <!-- 模块3 导航组 -->
        <cf-module-navigation v-if="contentType === 'navigation'"></cf-module-navigation>
        <!-- 模块4 商品列表 商品展示-->
        <cf-module-goods v-if="contentType === 'goodsList'" ref="goodsListRef"></cf-module-goods>
        <!-- 模块5  -->
        <cf-module-recommend v-if="contentType === 'goodsClassify'" ref="recommandRef" @scrollTo="scrollTo"></cf-module-recommend>
    </view>
</template>

<script lang="ts" setup>
import cfModuleSearch from './modules/searchBar.vue'
import cfModuleBanner from './modules/banner.vue'
import cfModuleBannerNew from './modules/bannerNew.vue'
import cfModuleNavigation from './modules/navigation.vue'
import cfModuleGoods from './modules/good-list.vue'
import cfModuleNotice from './modules/notice.vue'
import cfModuleCube from './modules/image-cube.vue'
import cfModuleTitle from './modules/title.vue'
import cfModuleRecommend from './modules/recomend.vue'
import cfModulePopup from './modules/popup.vue'
import cfModuleListNew from './modules/listNew.vue'
import cfModeleUniqlo from './modules/uniq-banner.vue'
import { ref, computed, provide } from 'vue'

interface Props {
    config: any
}
const props = withDefaults(defineProps<Props>(), {
    config: () => ({})
})
/** 组件类型 */
const contentType = computed<string>(() => {
    return props.config.contentType
})
const goodsListRef = ref<any>(null)
const recommandRef = ref<any>(null)

/** 依赖注入 */
provide('data', props.config)

const emit = defineEmits(['scrollTo'])

/** 调用子组件的setEnable方法 */
function setEnable(b: boolean) {
    recommandRef.value?.setEnable(b)
}
/** emit 触发 首页滚动事件 */
function scrollTo() {
    emit('scrollTo')
}
/** 加载更多 */
function loadMore() {
    recommandRef.value?.loadMore()
}

defineExpose({loadMore, setEnable})
</script>
